import React, { Component } from "react";

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "张振宇",
      gender: "女",
      isRead: false,
      hobbys: ["唱", "rap"],
      citys:["西安","眉县市","长治市","武汉市"],
      city:"",
    };
  }

  changeValue=(ev,value)=>{
    this.setState({
      [ev.target.name]: value!==undefined?value:ev.target.value
    });
  }

  changeHobbys=(ev)=>{
    let idx = this.state.hobbys.indexOf(ev.target.value)
    if(idx>-1){
        this.state.hobbys.splice(idx,1);
    }else{
        this.state.hobbys.push(ev.target.value);
    }

    this.setState({
        hobbys:this.state.hobbys
    })
  }

  render() {
    return (
      <div>
        <h1>受控组件（双向绑定）</h1>
        {/*1、文本框  */}
        <p>
          <input
          name="username"
            type="text"
            value={this.state.username}
            onChange={this.changeValue}
          />
        </p>
        {/* 2、单选 */}
        <p>
          <input
            type="radio"
            id="female"
            name="gender"
            value="女"
            checked={this.state.gender === "女"}
            onChange={this.changeValue}
          />
          <label htmlFor="female">女</label>
          <input
            type="radio"
            id="man"
            name="gender"
            value="男"
            checked={this.state.gender === "男"}
            onChange={this.changeValue}
          />
          <label htmlFor="man">男</label>
        </p>
        {/* 3、复选框 */}
        {/* 3.1、复选框的单个选择项 */}
        <p>
          <input
            type="checkbox"
            id="read"
            name="isRead"
            checked={this.state.isRead}
            onChange={(ev)=>this.changeValue(ev,!this.state.isRead)}
          />
          <label htmlFor="read">已阅读</label>
        </p>
        {/* 3.2、复选框的多个选项 */}
        <p>
          <input
            type="checkbox"
            id="sing"
            checked={this.state.hobbys.includes("唱")}
            value="唱"
            onChange={this.changeHobbys}
          />
          <label htmlFor="sing">唱</label>
          <input
            type="checkbox"
            id="jump"
            checked={this.state.hobbys.includes("跳")}
            value="跳"
            onChange={this.changeHobbys}
          />
          <label htmlFor="jump">跳</label>
          <input
            type="checkbox"
            id="rap"
            checked={this.state.hobbys.includes("rap")}
            value="rap"
            onChange={this.changeHobbys}
          />
          <label htmlFor="rap">rap</label>
          <input
            type="checkbox"
            id="basketball"
            checked={this.state.hobbys.includes("篮球")}
            value="篮球"
            onChange={this.changeHobbys}
          />
          <label htmlFor="basketball">篮球</label>
        </p>
        <p>
          请选择您的城市：
          <select name="city" value={this.state.city} onChange={this.changeValue}>
            <option value="" >===请选择城市===</option>
            {this.state.citys.map((item,index)=><option key={index} value={item}>{item}</option>)}
          </select>
        </p>
      </div>
    );
  }
}
